<template>
  <div>
    <RuleTable
      ref="table"
      :table="table"
      :type="type"
      :autoBuild="autoBuild"
      :colConditions="col"
      :rowConditions="row"
      :results="results"
      :initDatas="initDatas"
    ></RuleTable>
    <a-space style="margin-top: 10px">
      <!-- <a-button
        @click="getColumns"
        type="primary"
        >获取表结构</a-button
      >
      <a-button
        @click="getData"
        type="primary"
        >获取数据</a-button
      > -->
      是否自动生成表体：<a-checkbox
        :checked="autoBuild"
        @change="change"
      ></a-checkbox>
      <a-button
        @click="generateSimple1"
        type="primary"
        >生成简单规则表</a-button
      >
      <!-- <a-button
        @click="generateSimple2"
        type="primary"
        >生成竖向简单规则表</a-button
      > -->
      <a-button
        @click="generateComplex"
        type="primary"
        >生成复杂规则表</a-button
      >
      <a-button
        @click="merge"
        type="primary"
        >合并表头</a-button
      >
      <a-button
        @click="split"
        type="primary"
        >拆分表头</a-button
      >
    </a-space>
    <div style="margin-top: 10px">
      api:
      <div>
        <a-space>
          <a-button
            @click="getFactor"
            type="primary"
            >getFactor</a-button
          >
          <a-button
            @click="setFactorTitle"
            type="primary"
            >setFactorTitle</a-button
          >
          <a-button
            @click="getRule"
            type="primary"
            >getRule</a-button
          >
          <a-button
            @click="findRule"
            type="primary"
            >findRule</a-button
          >
          <a-button
            @click="getRuleResult"
            type="primary"
            >getRuleResult</a-button
          >
          <a-button
            @click="findRuleResult"
            type="primary"
            >findRuleResult</a-button
          >
        </a-space>
      </div>
      <div style="margin-top: 10px">
        <a-space>
          <a-button
            @click="setRuleCondition"
            type="primary"
            >setRuleCondition</a-button
          >
          <a-button
            @click="setRuleResult"
            type="primary"
            >setRuleResult</a-button
          >
          <a-button
            @click="setRuleData"
            type="primary"
            >setRuleData</a-button
          >
          <a-button
            @click="addRule"
            type="primary"
            >addRule</a-button
          >
          <a-button
            @click="deleteRule"
            type="primary"
            >deleteRule</a-button
          >
        </a-space>
        
      </div>
    </div>
  </div>
</template>
<script>
import RuleTable from './RuleTable.vue'
import RuleTableInstance from './RuleTableInstance'
export default {
  name: 'RuleTableDemo',
  components: {
    RuleTable,
  },
  data() {
    return {
      table: RuleTableInstance.createRuleTable(),
      type: 'simple',
      autoBuild: true,
      //列因子
      colConditions: [
        {
          code: 'name',
          title: '姓名',
          isEnum: true,
          options: [
            {
              value: 'name1',
              label: '张三',
            },
            {
              value: 'name2',
              label: '李四',
            },
          ],
        },
        {
          code: 'age',
          title: '年龄',
          isEnum: true,
          options: [
            {
              value: 'age1',
              label: '10-20',
            },
            {
              value: 'age2',
              label: '20-30',
            },
          ],
        },
      ],
      //行因子
      rowConditions: [
        {
          code: 'sex',
          title: '性别',
          dataType: 'String',
          isEnum: true,
          options: [
            {
              value: 'sex1',
              label: '男',
            },
            {
              value: 'sex2',
              label: '女',
            },
          ],
        },
        {
          code: 'area',
          title: '地区',
          dataType: 'String',
          isEnum: true,
          options: [
            {
              value: 'area1',
              label: '华东',
            },
            {
              value: 'area2',
              label: '华北',
            },
          ],
        },
      ],
      factors: {},
      results: [
        {
          code: 'rate',
          title: '费率',
          dataType: 'String',
          isEnum: false,
        },
      ],
      initDatas: [{ name: 'name1', age: 'age1', rate: 0.88 }],
      // rules: [
      //   {
      //     factors: { name: 'name1', age: 'age1' },
      //     results: { rate: 0.88 },
      //   },
      // ],
      col: [],
      row: [],
    }
  },
  created() {
    this.col = this.colConditions
    this.row = []
    // this.col = []
    // this.row = this.rowConditions
  },
  methods: {
    getColumns() {
      console.log(this.table.getColumns(), 'columns')
      // console.log(this.$refs.table.getColumns(), 'columns')
    },
    getData() {
      console.log(this.table.getData(), 'columns')
    },
    generate() {
      this.table.build()
    },
    generateSimple1() {
      console.log(this.table.build(), 'table.build')
      this.col = this.colConditions
      this.row = []
      this.type = 'simple'
      this.initDatas = [{ name: 'name1', age: 'age1', rate: 0.88 }]
      // this.generate()
    },
    generateSimple2() {
      this.col = []
      this.row = this.rowConditions
      this.type = 'simple'
      this.initDatas = [{ sex: 'sex1', area: 'area1', rate: 0.88 }]
      // this.generate()
    },
    generateComplex() {
      this.col = this.colConditions
      this.row = this.rowConditions
      this.type = 'complex'
      this.initDatas = [
        { name: 'name1', age: 'age1', sex: 'sex1', area: 'area1', rate: 0.88 },
        { name: 'name2', age: 'age1', sex: 'sex1', area: 'area1', rate: 0.99 },
      ]
      // this.generate()
    },

    merge() {
      this.table.merge()
    },
    split() {
      this.table.split()
    },
    change(e) {
      this.autoBuild = e.target.checked
    },
    getFactor() {
      console.log(this.table.getFactor('name'))
    },
    setFactorTitle() {
      this.table.setFactorTitle('name', '姓名1')
      // this.table.setFactorTitle('sex','性别1')
    },
    getRule() {
      console.log(this.table.getRule('key_0'))
    },
    findRule() {
      console.log(this.table.findRule({ rate: 0.88 }))
    },
    getRuleResult() {
      console.log(this.table.getRuleResult('key_0'))
    },
    findRuleResult() {
      console.log(this.table.findRuleResult({ name: 'name1' }))
    },
    setRuleCondition() {
      this.table.setRuleCondition('key_0', { name: 'name2', age: 'age2' })
    },
    setRuleResult() {
      this.table.setRuleResult('key_0', { rate: 0.99 })
    },
    setRuleData() {
      this.table.setRuleData('key_0', { condition: { name: 'name2', age: 'age2' }, result: { rate: 0.99 } })
    },
    addRule() {
      this.table.addRule({ key: 'key_1', condition: { name: 'name2', age: 'age2' }, result: { rate: 0.99 } })
    },
    deleteRule() {
      this.table.deleteRule('key_1')
    },
  },
}
</script>